<!--
 * @Description: 底部弹出
 * @Author:  Lxc
 * @Date: 2021-07-14 16:49:56
 * @LastEditors: luojie
 * @LastEditTime: 2021-08-13 15:18:07
-->
<template>
  <view class="room-detail-bottom">
    <!-- <uni-popup ref="popup" type="bottom" background-color="#fff" @close="closePopup"> -->
    <view class="room-num">{{ roomNum }}房</view>
    <view class="room-num">请选择{{ typeName }}人员</view>
    <view v-if="type == 'checkOut'">
      <scroll-view scroll-y="true" class="list-wrapper" >
        <ul class="leave-room" v-for="(item, index) in personList" :key="index">
          <li class="person-detail person-detail-check-out">
            <view
              :class="[
                personArr.indexOf(item.personId) !== -1
                  ? 'check-box'
                  : 'empty-check-box',
              ]"
              @click="clickCheckBox(item, personList)"
            ></view>
            <view>{{ item.name }}</view>
          </li>
          <li class="person-phone padding-phone">{{ item.telPhone || "--" }}</li>
          <li class='person-info'>
            <view>性别：
              <text class="blue-time">{{ item.gender==0?'女':item.gender==1?'男':'--' }}</text>
            </view>
            <view>年龄：
              <text class="blue-time">{{ item.age || "--" }}</text>
            </view>
          </li>
        </ul>
      </scroll-view>
      <button type="primary" @click="clickLeave()">离点</button>
    </view>
    <view v-else>
      <scroll-view scroll-y="true"  class="list-wrapper"  >
        <ul
          class="to-detail"
          v-for="(item, index) in personList"
          :key="index"
          @click="goToDetail(item, personList)"
        >
          <li class="person-detail">
            <view class="serial-number">{{ index + 1 }}</view>
            <view>{{ item.name }}</view>
            <view class="person-phone">{{ item.telPhone || "--" }}</view>
          </li>

          <li class='person-info' :class="{'medicalObservation': type=='medicalObservation'}">
            <view>性别：
              <text class="blue-time">{{ item.gender==0?'女':item.gender==1?'男':'--' }}</text>
            </view>
            <view :class="{'medicalObservation': type=='medicalObservation'}">年龄：
              <text class="blue-time">{{ item.age || "--" }}</text>
            </view>
            <view v-if="type=='medicalObservation'" class="medicalObservation-tips">
              <view class="brown-tips" v-if="item.medicalObservationTimes === 0">未观察</view>
              <view class="orange-tips" v-if="item.medicalObservationTimes === 1">一次观察</view>
              <view class="green-tips" v-if="item.medicalObservationTimes > 1">二次观察</view>
            </view>
          </li>

          <li class="detail-time"  v-if="type =='referral'">
            是否转诊就医：
            <text class="origin-tips" v-if="item.seeDoctor == 1">是</text>
            <text class="blue-time" v-if="item.seeDoctor == 0">否</text>
          </li>

          <li  class="detail-time" v-else-if='type=="IsolationDelay"'>
            入住时间：{{item.moveStartTime}}
          </li>

          <li v-else-if='type=="changeOccupancy"'></li>

          <li class="detail-time" v-else>
            最后{{ typeName }}时间：
            <text class="blue-time">
              <!-- {{
                typeName === "评估"
                  ? item.lastHealthTime || "--"
                  : typeName === "观察"
                  ? item.lastDailyTime || "--"
                  : "--"
              }} -->
              {{
                typeName === "评估"
                  ? getUpdateTime(item)
                  : typeName === "观察"
                  ? item.lastDailyTime || "--"
                  : "--"
              }}
            </text>
          </li>

        </ul>
      </scroll-view>
      
    </view>
    <!-- </uni-popup> -->
  </view>
</template>

<script>
export default {
  props: {
    type: String,
    roomNum: String,
    personList: Array,
    selectedFloor: String,
    searchValue: String,
    checkedList: Array,
  },
  data() {
    return {
      typeName: "",
      personArr: [], // 选择的人的信息
      idList:[], //
    };
  },
  watch: {
    roomNum: {
      handler(val) {
        this.personArr = [];
        this.$store.state.personDetail = [];
      },
    },
    // selectedFloor: {
    //   handler(val) {
    //     console.log(val)
    //     this.selectedFloor = val;
    //   },
    // },
  },
  mounted() {
    switch(true){
      case this.type === "healthInspect":
        this.typeName = "评估";
        break;
      case this.type === "medicalObservation":
        this.typeName = "观察";
        break;
      case this.type === "checkOut":
        this.typeName = "离点";
        break;
      case this.type === "referral":
        this.typeName = "转诊";
        break;
      case this.type === "IsolationDelay":
        this.typeName = "隔离延期";
        break;
      case this.type === "changeOccupancy":
        this.typeName = "变更";
        break;
      case this.type === "psychologicalInspection":
        this.typeName = "巡诊";
        break;
    }
    // this.typeName =
    //   this.type === "healthInspect"
    //     ? "评估"
    //     : this.type === "medicalObservation"
    //     ? "观察"
    //     : this.type === "checkOut"
    //     ?"离点"
    //     :"转诊";
  },
  methods: {
    // 人员信息
    goToDetail(item, arr) {
      if(this.type=="medicalObservation" && !item.isolateId){
        uni.showToast({
          title: '该隔离人员尚未做健康排查',
          icon:'none',
          duration: 3000
        });
        return
      }
      this.$store.commit('SET_IS_SELECT_ROOM', true)
      this.$store.commit('PERSON_ID', [item.personId])
      this.$store.commit('PERSON_DETAIL', arr) // 存储整个房间的人的信息
      uni.setStorage({ key: 'personInfo', data: item });

      // 存储选择的楼层、搜索房间
      // uni.setStorage({ key: 'curSelectedFloor', data: this.selectedFloor });
      // uni.setStorage({ key: 'curSearchValue', data: this.searchValue });

      uni.setStorageSync( 'curSelectedFloor', this.selectedFloor );
      uni.setStorageSync( 'curSearchValue', this.searchValue );
      uni.setStorageSync( 'checkedList', this.checkedList );
      let url = `../${this.type}/index?type=${this.type}`;
      if (this.type == 'referral' || this.type == 'changeOccupancy' || this.type == 'IsolationDelay') {
        url = `../../packageAlpha/pages/${this.type}/index?type=${this.type}&seeDoctor=${item.seeDoctor}`
      }
      console.log(url);
      uni.navigateTo({
        // url: `../${this.type}/index?type=${this.type}`,
        url: url,
      });
    },
    // 多选 -- 被绕晕，待改
    clickCheckBox(data, arr) {
      let sub = this.personArr.indexOf(data.personId);
      sub === -1 ? this.personArr.push(data.personId) : this.personArr.splice(sub, 1)
      this.$store.state.personDetail = arr;
    },
    // 离点
    clickLeave() {
      if(!this.personArr.length){
        uni.showToast({
          title: "请选择离点人员",
          icon: "none",
          duration: 3000,
        })
        return
      }
      this.$store.state.personId = this.personArr;
      this.$store.commit('SET_IS_SELECT_ROOM', true);
      
      console.log('选房缓存楼层：',this.selectedFloor );
      // 存储选择的楼层、搜索房间
      // uni.setStorage({ key: 'curSelectedFloor', data: this.selectedFloor });
      // uni.setStorage({ key: 'curSearchValue', data: this.searchValue });

      uni.setStorageSync('curSelectedFloor', this.selectedFloor );
      uni.setStorageSync('curSearchValue', this.searchValue);

      uni.navigateTo({
        url: `../${this.type}/index?type=${this.type}`,
      });
    },

    getUpdateTime(item){
      let personalInfo=uni.getStorageSync('personalInfo');
      let authorities=personalInfo.authorities||[];
      let isJiankang,isXinli;
      authorities.map(ele => {
        if(ele.name==='健康评估'){
          isJiankang=true;
        }
        if(ele.name==='心理评估'){
          isXinli=true;
        }
      })
      if(isJiankang && isXinli) {
        return item.lastDailyTime || item.lastHealthTime || item.lastRiskTime  ||'--';
      }else if(isJiankang) {
        return item.lastHealthTime||'--';
      }else if(isXinli) {
        return item.lastRiskTime||'--'
      }else {
        return '--';
      }
    },

  },
};
</script>

<style lang="scss" scoped>
.room-detail-bottom {
  padding: 21rpx 32rpx;
  .room-num {
    font-size: 40rpx;
    padding-bottom: 36rpx;
  }
  ul {
    // display: flex;
    position: relative;
    width: 686rpx;
    height: 220rpx;
    margin-bottom: 32rpx;
    background: #ffffff;
    box-shadow: 0rpx 8rpx 20rpx #e5e5e5;
    border-radius: 16rpx;
  }
  .to-detail:after {
    content: "";
    position: absolute;
    top: 63rpx;
    right: 20rpx;
    width: 44rpx;
    height: 44rpx;
    background: url("https://szgd-dev.tgovcloud.com/public/images/right-arrow.png") no-repeat;
    background-size: contain;
  }
  .list-wrapper {
    height: 60vh;
  }
  .person-detail {
    display: flex;
    padding: 36rpx 0 18rpx;
    view {
      height: 50rpx;
      &:nth-child(2) {
        padding-right: 20rpx;
        font-size: 36rpx;
        font-weight: bold;
        line-height: 50rpx;
        color: #333333;
      }
    }
  }
  .person-detail-check-out{
    padding: 36rpx 0 10rpx;
  }
  .serial-number {
    width: 50rpx;
    height: 50rpx;
    margin: 0rpx 10rpx 0 20rpx;
    background: #2c9af1;
    border-radius: 50%;
    font-size: 36rpx;
    font-weight: 400;
    line-height: 50rpx;
    color: #ffffff;
    text-align: center;
  }
  .check-box {
    position: relative;
    width: 50rpx;
    height: 50rpx;
    margin: 0rpx 10rpx 0 20rpx;
    background: #2c9af1;
    border-radius: 50%;
    border: 1px solid transparent;
    font-size: 36rpx;
    font-weight: 400;
    line-height: 50rpx;
    text-align: center;
    &:before {
      content: "";
      position: absolute;
      top: 17rpx;
      right: 11rpx;
      width: 26.85rpx;
      height: 18.99rpx;
      background: url("https://szgd-dev.tgovcloud.com/public/images/check-icon.png") no-repeat;
      background-size: contain;
    }
  }
  .empty-check-box {
    width: 50rpx;
    height: 50rpx;
    margin: 0rpx 10rpx 0 20rpx;
    background: #f0f0f0;
    border: 1px solid #707070;
    border-radius: 50%;
  }
  .person-phone {
    height: 50rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 50rpx;
    color: #666666;
  }
  .padding-phone {
    padding-left: 84rpx;
  }
  .person-info{
    display:flex;
    font-size:28rpx;
    line-height: 46rpx;
    color:#666666;
    margin-bottom:10rpx;
    view:first-child{
      margin:0 80rpx;
    }
  }
  .medicalObservation{
    white-space: nowrap;
    view:nth-child(2){
      margin-right: 0;
    }
    view:nth-child(3){
      margin-right: 10rpx;
    }
    .medicalObservation-tips{
      view{
        width: 176rpx;
        height: 50rpx;
        line-height: 46rpx;
        font-size: 26rpx;
        box-sizing: border-box;
        border-radius: 4rpx;
        text-align: center;
        margin-right: 0;
      }
      .brown-tips{
        border: 2rpx solid rgba(241, 91, 83, 0.5);
        color: rgba(241, 91, 83, 1);
        background:  rgba(241, 91, 83, 0.1);
      }
      .orange-tips{
        border: 2rpx solid rgba(255, 172, 30, 0.5);
        color: rgba(255, 172, 30, 1);
        background:  rgba(255, 172, 30, 0.1);
      }
      .green-tips{
        border: 2rpx solid rgba(19, 197, 99, 0.5);
        color: rgba(19, 197, 99, 1);
        background:  rgba(19, 197, 99, 0.1);
      }
    }
  }
  .detail-time {
    height: 40rpx;
    margin-left: 80rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    color: #666666;
  }
  .blue-time {
    color: #2c9af1;
  }
  .origin-tips{
    color: rgba(247, 150, 114, 1);
  }
  button[type="primary"] {
    margin-top: 22rpx;
    background-color: #2c9af1;
  }
  // .serial-number {
  //   width: 50rpx;
  //   height: 50rpx;
  //   background: #2c9af1;
  //   border-radius: 50%;
  // }
}
</style>
